<template>
  <div class="tuanbox">
    <div class="tuantop">
      <div class="logo">爆爆团</div>
      <div class="alert">限时爆款 超级低价</div>
    </div>
    <!-- ---------------------------------- list ------------------------------- -->

    <div class="tabbarlist">
      <div v-for="(item, index) in list" :key="index" :class="{ checked: pindex == index }"
        @click="changeStatus(index)">
        <span>{{ item.name }}</span>
        <div class="xian"></div>
      </div>
    </div>
    <div class="goodlist">
      <div class="item" v-for="(item, index) in tuanlist" :key="index">
        <div class="imgbox">
          <img :src="item.picture" alt="">
        </div>
        <div class="wordbox">
          <div class="wenzi">
            <span class="unit">{{ item.unit }}</span>
            <span class="disc">{{ item.name }}</span>
            <div class="databox">
              <div class="jiage">
                <span class="bao">爆爆团价</span>
                <span class="price">{{ item.min_price }}</span>
                <span class="originprice">￥50</span>
              </div>
              <div class="qiang">
                <button>马上抢</button>
                <span class="count">{{ item.month_saled_content }}</span>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script setup>
import { tuan_list } from '../../api/index'
import { ref, onMounted } from 'vue'


var list = ref([{ id: 1, name: "正在抢购" },
{ id: 2, name: "上新预告" }
])
var tuanlist = ref([])
var pindex = 0


// function change(item) {
//   if (item.status == 0) {
//     item.status = 1
//   }
// }

// function changeStatus(index) {
//   pindex = index
//   // this.status = !this.status

//   if (index == 1) {
//     tuan_list({ status: 1 }).then((res) => {

//       tuanlist.value = res.data.list
//     })

//   } else {
//     tuan_list({ status: 0 }).then((res) => {

//       tuanlist.value = res.data.list
//     })
//   }
// }


onMounted(() => {
  tuan_list({ status: 0 }).then((res) => {
    tuanlist.value = res.data.liat;
  })
})
</script>

<style scoped>
.tuanbox {
  height: 90%;
  overflow: auto;
  background: linear-gradient(to bottom, rgb(249, 77, 3) 0%, rgb(255, 128, 0) 50%, white 75%);
}

.tuantop {
  height: 20%;
  box-sizing: border-box;
  padding: 20px 40px;
  text-align: center;
}

.tuantop .logo {
  font-style: italic;
  font-size: 27px;
  color: #ffffff;
  margin-bottom: 25px;
}

.tuantop div:nth-child(2) {
  font-size: 35px;
  color: #fdf4e6;
}

/* ------------------------------------------------- */
.tuantop {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.tabbarlist {
  display: flex;
}

.tabbarlist>div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabbarlist span {
  font-size: 16px;
  padding: 5px 10px;
  color: blue;
  cursor: pointer;
}

.tabbarlist .checked .xian {
  width: 10px;
  width: 14px;
  border-bottom: 2px solid blue;
}

.list {
  box-sizing: border-box;
  height: 60%;
  width: 100%;
  padding: 10px;
}

::-webkit-scrollbar {
  width: 0
}

.list .item {
  height: 100px;
  display: flex;
  margin-bottom: 5px;

}

.list .item img {
  height: 100%;
}

.list .item .wordbox {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 5px;
}

.list .item .wordbox .wenzi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.list .item .wordbox .wenzi .unit {
  color: grey;
  font-size: 12px;
  margin-bottom: 5px;
}

.list .item .wordbox .wenzi .disc {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 5px;
}

.list .item .wordbox .databox {
  flex: 1;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.list .item .wordbox .databox .jiage {
  font-size: 12px;
  display: flex;
  flex-direction: column;

}

.list .item .wordbox .databox .jiage .bao {
  color: red;
}

.list .item .wordbox .databox .jiage .price {
  font-size: 16px;
  font-weight: 700;
  color: red;
}

.list .item .wordbox .databox .jiage .originprice {
  color: grey;
  text-decoration: line-through;
  font-size: 12px;
}

.list .item .wordbox .databox .qiang {
  display: flex;
  flex-direction: column;
}

.list .item .wordbox .databox .qiang button {
  border: none;
  background-color: #eb4d26;
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  font-size: 12px;
}

.list .item .wordbox .databox .qiang button {
  border: none;
  background-color: #eb4d26;
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  font-size: 12px;
  margin-bottom: 10px;
}

.list .item .wordbox .databox .qiang .count {
  text-align: center;
  color: #eb4d26;
  font-size: 12px;
}

/* ----------------------------------------------------------------- */
.goodlist {
  box-sizing: border-box;
  height: 70%;
  width: 100%;
  padding: 0 10px;
  /* overflow: scroll; */
}

::-webkit-scrollbar {
  width: 0
}

.goodlist .item {
  height: 100px;
  display: flex;
  margin-bottom: 5px;

}

.goodlist .item img {
  height: 100%;
}

.goodlist .item .wordbox {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0px 5px;
}

.goodlist .item .wordbox .wenzi {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}

.goodlist .item .wordbox .wenzi .unit {
  color: grey;
  font-size: 12px;
  margin-bottom: 5px;
}

.goodlist .item .wordbox .wenzi .disc {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 5px;
}

.goodlist .item .wordbox .databox {
  flex: 1;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.goodlist .item .wordbox .databox .jiage {
  font-size: 12px;
  display: flex;
  flex-direction: column;

}

.goodlist .item .wordbox .databox .jiage .bao {
  color: red;
}

.goodlist .item .wordbox .databox .jiage .price {
  font-size: 16px;
  font-weight: 700;
  color: red;
}

.goodlist .item .wordbox .databox .jiage .originprice {
  color: grey;
  text-decoration: line-through;
  font-size: 12px;
}

.goodlist .item .wordbox .databox .qiang {
  display: flex;
  flex-direction: column;
}

.goodlist .item .wordbox .databox .qiang button {
  border: none;
  background-color: #eb4d26;
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  font-size: 12px;
}

.goodlist .item .wordbox .databox .qiang button {
  border: none;
  background-color: #eb4d26;
  padding: 5px 10px;
  border-radius: 15px;
  color: white;
  font-size: 12px;
  margin-bottom: 10px;
}

.goodlist .item .wordbox .databox .qiang .count {
  text-align: center;
  color: #eb4d26;
  font-size: 12px;
}
</style>
